<template>
  <view id="home" class="home--new">
    <!-- 轮播图模块(开始) -->
    <view class="swiper">
      <Slide :list="list_slide" />
    </view>
    <!-- 轮播图模块(结束) -->

    <!-- 菜单模块(开始) -->
    <view class="menu">
      <list_menu :list="list_menu"></list_menu>
    </view>
    <!-- 菜单模块(结束) -->

    <!-- 公告模块(开始) -->
    <view class="notice">
      <navigator url="/pages/notice/list">
        <Notice :list="list_notice" />
      </navigator>
    </view>
    <!-- 公告模块(结束) -->

    <!-- 旅游资讯模块(开始) -->
    <Card
      title="旅游资讯"
      url="/pages/article/list"
      :list="list_article"
      v-if="$check_action('/article/list', 'get')"
      class="article_list"
    >
      <list_article :list="list_article"></list_article>
    </Card>
    <!-- 旅游资讯模块(结束) -->

    <!-- 推荐酒店信息模块(开始) -->
    <Card
      class="list_diy"
      title="酒店信息推荐"
      url="/pages/hotel_information/list"
      :list="list_hotel_information"
      v-if="$check_action('/hotel_information/list', 'get')"
    >
      <list_hotel_information
        :list="list_hotel_information"
      ></list_hotel_information>
    </Card>
    <!-- 推荐酒店信息模块(结束) -->

    <!-- 版权模块(开始) -->
    <view class="copyright">
      <text>@版权归属 XX 所有</text>
    </view>
    <!-- 版权模块(结束) -->
  </view>
</template>

<script>
import list_hotel_information from '@/components/diy/list_hotel_information.vue'
import Card from '@/components/common/card.vue'
import bar_title from '@/components/diy/bar_title.vue'
import list_menu from '@/components/diy/list_menu.vue'
import list_article from '@/components/diy/list_article.vue'
import Slide from '@/components/common/slide.vue'
import Notice from '@/components/common/notice.vue'

import mixin from '@/libs/mixins/page.js'
export default {
  mixins: [mixin],
  components: {
    list_hotel_information,
    Card,
    bar_title,
    list_menu,
    list_article,
    Slide,
    Notice,
  },
  data() {
    return {
      isSmall: false,
      sendValue: '',
      chatList: [],
      showChat: false,
      isAdmin: false,
      token: '',
      scrollTop: 0,
      oldScrollTop: 0,

      str: '<div>测试一下</div>',
      list_hotel_information: [],
      list_slide: [],
      list_article: [],
      list_menu: [],
      list_notice: [],
    }
  },
  methods: {
    // toggle
    toToggle() {
      this.isAdmin = !this.isAdmin
    },

    /**
     *  获取酒店信息
     */
    get_hotel_information() {
      let url = getApp().globalData.host + '/api/hotel_information/get_list?'
      let param = {
        page: 1,
        size: 12,
      }
      this.$get(url, param, (json) => {
        if (json.result && json.result.list) {
          this.list_hotel_information = json.result.list
          this.list_hotel_information.map((o) => {
            o['praise_len']
          })
          this.get_praise(
            this.list_hotel_information,
            'hotel_information',
            'hotel_information_id'
          )
        }
      })
    },

    /**
     * 当前年月日时分秒方法
     * @param {Object} fmt
     */
    dateFormat(fmt) {
      var myDate = new Date()
      var o = {
        'M+': myDate.getMonth() + 1, // 月份
        'd+': myDate.getDate(), // 日
        'h+': myDate.getHours(), // 小时
        'm+': myDate.getMinutes(), // 分
        's+': myDate.getSeconds(), // 秒
        'q+': Math.floor((myDate.getMonth() + 3) / 3), // 季度
        S: myDate.getMilliseconds(), // 毫秒
      }
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(
          RegExp.$1,
          (myDate.getFullYear() + '').substr(4 - RegExp.$1.length)
        )
      for (var k in o)
        if (new RegExp('(' + k + ')').test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ('00' + o[k]).substr(('' + o[k]).length)
          )
      return fmt
    },

    /**
     *  获取轮播图
     */
    get_slides() {
      this.$get(
        getApp().globalData.host + '/api/slides/get_list?',
        {},
        (json) => {
          if (json.result && json.result.list) {
            this.list_slide = json.result.list
            this.list_slide.map((o) => {
              o['praise_len']
            })
            this.get_praise(this.list_slides, 'slides', 'slides_id')
          }
        }
      )
    },

    /**
     *  获取导航栏
     */
    get_menu() {
      var user_group = this.$store.state.user.user_group
      this.$get(
        getApp().globalData.host + '/api/auth/get_list?',
        { size: '0', get: '', user_group, get: 1, position: 'top' },
        (json) => {
          if (json.result && json.result.list) {
            this.list_menu = json.result.list
            this.list_menu.map((o) => {
              o['praise_len']
            })
            this.get_praise(this.list_auth, 'auth', 'auth_id')
          }
        }
      )
    },

    /**
     *  获取文章
     */
    get_article() {
      this.$get(
        getApp().globalData.host + '/api/article/get_list?',
        { page: 1, size: 6 },
        (json) => {
          if (json.result && json.result.list) {
            this.list_article = json.result.list
            this.list_article.map((o) => {
              o['praise_len']
            })
            this.get_praise(this.list_article, 'article', 'article_id')
          }
        }
      )
    },

    /**
     *  获取公告列表
     */
    get_notice() {
      this.$get(
        getApp().globalData.host + '/api/notice/get_list?',
        { page: 1, size: 3 },
        (json) => {
          if (json.result && json.result.list) {
            this.list_notice = json.result.list
            this.list_notice.map((o) => {
              o['praise_len']
            })
            this.get_praise(this.list_notice, 'notice', 'notice_id')
          }
        }
      )
    },

    /**
     *  获取点赞数
     *  @param {Object} list
     */
    get_praise(list, table, idName) {
      if (list) {
        for (let i = 0; i < list.length; i++) {
          list[i].praise_len = 0
        }
        this.$get(
          getApp().globalData.host +
            '/api/praise/list_group?source_table=' +
            table +
            '&groupby=source_id',
          {},
          (res) => {
            if (res.result && res.result.list) {
              res.result.list.map((o) => {
                for (let i = 0; i < list.length; i++) {
                  let oj = list[i]
                  if (oj[idName] === o['source_id']) {
                    oj['praise_len'] = o['count']
                    break
                  }
                }
              })
            } else if (res.error) {
              console.error(res.error)
            }
          }
        )
      }
    },
  },
  onShow() {
    this.get_hotel_information()
    this.get_menu()
    this.get_slides()
    this.get_article()
    this.get_notice()

    // this.get_praise();
  },
}
</script>
<style lang="scss" scoped>
.support_icon {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0%;
  bottom: 10%;
  z-index: 9999;
}
.support_module .container {
  height: 64%;
  width: 19.4rem;
  border-radius: 4px;
  border: 0.5px solid #e0e0e0;
  background-color: #f5f5f5;
  overflow: hidden;
  position: fixed;
  padding: 0;
  margin-left: -9.7rem;
  z-index: 99999999;
}
.support_module .small_css {
  height: 40px;
  width: 200px;
  right: -15px;
  bottom: 0px;
}
.support_module .big_css {
  top: 12%;
  left: 50%;
}
.support_module .content {
  width: calc(100% - 0px);
  overflow-y: scroll;
  height: 64%;
  padding: 0 10px 10px 0;
}
.support_module .content::-webkit-scrollbar {
  display: none;
}
.support_module_title {
  text-align: right;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
}
.support_module_title .title_btn {
  font-size: 20px;
  cursor: pointer;
  margin-right: 20px;
  color: #888;
}
.support_module .content:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
}
.support_module .bubble {
  max-width: 182px;
  padding: 10px;
  border-radius: 5px;
  position: relative;
  color: #000;
  word-wrap: break-word;
  word-break: normal;
  font-size: 12px;
}
.support_module .item_left .bubble {
  margin-left: 10px;
  background-color: #fff;
}
.support_module .item_left .bubble:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-top: 10px solid transparent;
  border-right: 10px solid #fff;
  border-bottom: 10px solid transparent;
  left: -20px;
}
.support_module .item_right .bubble {
  margin-right: 10px;
  background-color: #9eea6a;
}
.support_module .item_right .bubble:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid #9eea6a;
  border-top: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  left: none;

  right: -20px;
}
.support_module .item {
  margin-top: 15px;
  display: flex;
  width: 100%;
}
.support_module .item.item_right {
  justify-content: flex-end;
}
.support_module .item.item-center {
  justify-content: center;
}
.support_module .item.item-center span {
  font-size: 12px;
  padding: 2px 4px;
  color: #fff;
  background-color: #dadada;
  border-radius: 3px;
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
}

.support_module .avatar image {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.support_module .input-area {
  border-top: 0.5px solid #e0e0e0;
  height: 15%;
  background-color: #fff;
}
.support_module textarea {
  flex: 1;
  padding: 10px;
  font-size: 12px;
  border: none;
  overflow-y: auto;
  overflow-x: hidden;
  outline: none;
  resize: none;
  width: 102%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  box-sizing: border-box;
}
.support_module .button-area {
  display: flex;
  height: 50px;
  line-height: 50px;
  padding: 5px;
  justify-content: flex-end;
  text-align: right;
  width: 100%;
  background: #fff;
}
.support_module .button-area .send-btn {
  width: 80px;
  height: 28px;
  line-height: 28px;
  border: none;
  outline: none;
  border-radius: 4px;
  float: right;
  cursor: pointer;
  background: #9eea6a;
  font-size: 12px;
  color: #333;
  margin: 0px;
  text-align: center;
}
</style>
